<template>
    <!-- <div>地址管理</div> -->
    <div>
         <div class="app-container">
        <el-card>
      <div slot="header" class="clearfix">
         <el-button size="mini" type="primary" @click="addAddress">新增</el-button>
      </div>
      <div>
            <el-table v-loading="loading" :data="addressList"  border style="width: 100%">
                <el-table-column fixed type="index" label="#" width="50"></el-table-column>
                <el-table-column  prop="addressName"  label="地址名称" width="150"></el-table-column>
                <el-table-column   label="默认发货地址" width="150">
                    <template slot-scope="scope">
                        <span>默认发货地址:</span>
                        <el-switch  @change="sendStatusAdress(scope.row)" v-model="scope.row.sendStatus" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column  prop="name"  label="收货人姓名" width="150"></el-table-column>
                <el-table-column  prop="phone"  label="收货人电话" width="150"></el-table-column>
                <el-table-column    label="收货人地址" width="150">
                    <template slot-scope="scope">
                        <div>{{scope.row.province}}</div>
                        <div>{{scope.row.city}}</div>
                        <div>{{scope.row.region}}</div>
                        <div>{{scope.row.detailAddress}}</div>              
                    </template>
                </el-table-column>
                <el-table-column   label="默认收货地址" width="150">
                    <template slot-scope="scope">
                        <span>默认收货地址:</span>
                        <el-switch  @change="receiveStatusAddress(scope.row)" v-model="scope.row.receiveStatus" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column  prop="createTime"  label="创建时间" width="150"></el-table-column>
                <el-table-column fixed="right"  label="操作"  width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editList(scope.row)">编辑</el-button>
                        <el-button type="text" style="color:red" size="small" @click="removeList(scope.row)" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
      </div>
    </el-card>
       
    </div>
    <ComAddress  ref="conAddress"/>
    </div>

</template>
<script>
import address from "@/api/order/address"
import ComAddress from "../components/Address"
export default {
    components:{
        ComAddress
    },
    data(){
        return{
            loading:false,
            addressList:[],
        }
    },
    methods:{
        //获取地址列表
        init(){
            address.addressList().then(res=>{
                console.log(res);
                if(res.success){
                    this.addressList=res.data.items
                }else{
                    this.$message.error("获取地址列表失败")
                }
            })
        },
        //新增
        addAddress(){
            this.$refs.conAddress.setAddress()
        },
        //默认发货地址
        sendStatusAdress(row){
            console.log(row)
            var tempShow=row.sendStatus==0?1:0;
            address.setSendOne({
                id:row.id
            }).then(res=>{
                if(res.success){
                    this.$message({
                        type: 'success',
                        message: '设置发货地址成功成功!'
                    });
                    this.init();
                }else{
                    this.$message.error("设置发货地址失败")
                    row.sendStatus=tempShow;

                }
            })
        },
        //默认收货地址
        receiveStatusAddress(row){
            var tempShow=row.receiveStatus==0?1:0;
            address.setReceiveOne({
                id:row.id
            }).then(res=>{
                if(res.success){
                    this.$message({
                        type: 'success',
                        message: '设置收货地址成功成功!'
                    });
                    this.init();
                }else{
                    this.$message.error("设置收货地址失败")
                    row.receiveStatus=tempShow;
                }
            })
        },
        //编辑
        editList(row){
             console.log(row)
            this.$refs.conAddress.open(row)
        },
        //删除
        removeList(row){
             this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    address.delAddress(row.id).then(res=>{
                        if(res.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.init();
                        }else{
                            this.$message.error("你删除失败了,开心不")
                        }
                    })
                
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
        }
    },
    created(){
        this.init();
    }
}
</script>
<style lang="scss" scoped>

</style>